<template>
	<view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无上门地址" v-if="lists.length==0">
		</u-empty>
		<view class="item" v-for="(item,index) in lists" :key="index">
			<view style="display: flex;align-items: center;">
				<text v-if="item.is_default"
					style="padding: 4rpx 10rpx;color: white;background-color: #75D65E;margin-right: 10rpx;border-radius: 10rpx;">默认</text>
				{{item.province}}/{{item.city}}/{{item.area}}/{{item.detail}}
			</view>
			<view class="">
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view>
					<text>{{item.username}}</text>
					<text>{{item.mobile}}</text>
				</view>
				<view style="display: flex;align-items: center;">
					<u-icon name="edit-pen" color="#9e9e9e" size="20" style="margin-right: 12rpx;"
						@click="edit(item)"></u-icon>
					<u-icon name="trash" color="#9e9e9e" size="20" @click="delAdd(item.id)"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="add">
				新增上门地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list3,
		del
	} from "@/request/api/address.js"
	export default {
		data() {
			return {
				lists: [],
			}
		},

		async onShow() {
			let res = await list3();
			this.lists = res.data;
		},
		methods: {
			add() {
				uni.navigateTo({
					url: "/pages/addressAdd/addressAdd"
				})
			},
			async delAdd(id) {
				await del(id)
				let res = await list3();
				this.lists = res.data;
			},
			edit(item) {
				uni.navigateTo({
					url: "/pages/addressAdd/addressEdit?item=" + JSON.stringify(item)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(255, 255, 255);
	}
</style>
<style scoped lang="scss">
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.btn {
			margin: 30rpx;
			margin-top: 100rpx;
			background: linear-gradient(to right, #75D65E, #75D65E);
			color: white;
			border-radius: 50px;
			text-align: center;
			padding: 24rpx 0;
			font-size: 32rpx;
		}
	}

	.item {
		font-size: 24rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #dedede;
	}
</style>